<!--  -->
<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-form inline>
        <el-form-item :label="$t('message.spmc')">
          <el-input v-model="filters.goodsName" :placeholder="$t('message.qsr') + $t('message.spmc')" clearable />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
          <el-button v-preventReClick @click="clear">{{ $t('message.clear') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <template>
        <el-tabs v-model="activeType" @tab-click="handleClick">
          <el-tab-pane
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :name="item.id"
          />
        </el-tabs>
      </template>
    </div>
    <div class="top-speace">
      <div class="good-content">
        <div
          v-for="(item, index) in goodsList"
          :key="index"
          class="slode-style"
        >
          <div class="card-style normal-style">
            <img :src="item.picture" class="goods-image" alt="">
            <div class="right-items">
              <div class="goods-name">
                {{
                  item.name.length > 30
                    ? item.name.slice(0, 27) + "..."
                    : item.name
                }}
              </div>
              <div class="stock-style">
                <span class="stock-title-style">{{ $t('message.kucun') }}：</span>
                <span class="stock-value-style">{{ item.stock }}</span>
              </div>
              <div class="add-module-style">
                <div class="card-first-price">{{ $t('message.rmbfh') }}{{ item.price }}</div>
                <div class="add-item-style">
                  <el-button
                    type="primary"
                    @click="addSaleGoods(item)"
                  >{{ $t('message.tijia') }}</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Paginations
        :total="totalCount"
        :page-size="pagination.rows"
        :page="pagination.page"
        :integrated="integrated"
        @current-change="getList"
      />
    </div>
    <div class="property-title margin-t-20">{{ $t('message.dgsp') }}</div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="saleGoodsList"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table margin-t-20"
    >
      <el-table-column :label="$t('message.xh')" prop="sort" :min-width="$i18n.locale === 'ZH'? 50 : 120" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.spmc')" min-width="200" prop="name" show-overflow-tooltip />
      <el-table-column
        align="center"
        :label="$t('message.price')"
        prop="price"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column align="center" :label="$t('message.hyjg')" min-width="200">
        <template slot-scope="scope">
          <el-popover :key="`popover-${scope.row.id}`" placement="top-start" width="300" trigger="click">
            <div class="pre">
              <div class="discount-title">{{ $t('message.hyzk') }}</div>
              {{ discountInfo }}
            </div>
            <el-button
              slot="reference"
              v-preventReClick
              type="text"
              @click="toShow(scope)"
            >{{ $t('message.djck') }}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.spkc')"
        prop="stock"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column align="center" :label="$t('message.num')" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.buynum"
            :min="1"
            :max="Number(scope.row.stock)"
          />
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('message.spzj')" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ (scope.row.buynum * scope.row.price).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" min-width="100" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              type="text"
              class="secondColor"
              @click="delSaleGoods(scope.$index, scope.row)"
            >{{ $t('message.del') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="saleGoodsList.length" class="bottom-style">
      <div class="sum-style">
        <span class="sum-title">{{ $t('message.ddhj') }}：</span>
        <span class="sum-value">{{ totalPrice() }}</span>
      </div>
      <div v-if="meta.indexOf('GoodsPayFor') > -1" class="btn-style" @click="settleAccount">{{ $t('message.jiezhan') }}</div>
    </div>
    <orderDialog ref="child" @orderSuccess="payOrderSuccess" />
  </div>
</template>

<script>
import {
  goodsClassifyListVenue,
  goodsListVenue,
  goodsDiscount
} from '@/api'
import orderDialog from '@/components/order'
export default {
  name: 'GoodsSale',
  components: {
    orderDialog
  },
  data() {
    return {
      meta: [],
      listLoading: true,
      activeType: '-1',
      discountInfo: '',
      selectType: {
        id: '-1'
      },
      integrated: false,
      typeList: [],
      goodsList: [],
      saleGoodsList: [],
      list: [],
      pagination: {
        page: 1,
        rows: 6
      },
      totalCount: 0,
      swiperOptions: {
        // slidesPerView: 'auto',
        // pagination: {
        //   el: '.swiper-pagination'
        // }
        slidesPerView: 4,
        slidesPerColumnFill: 'row',
        slidesPerColumn: 4,
        // autoplay:true,
        // loop:true,
        // speed: 2200, // 添加如下两句代码即可恢复自动轮播
        observer: true, // 当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: '.swiper-pagination-page'
          // clickable: true
        }
        // ,
        // breakpoints: {
        // // 当宽度大于等于480
        //   480: {
        //     slidesPerView: 1,
        //     slidesPerColumn: 1
        //   }

        // }
      },
      filters: {
        goodsName: ''
      }
    }
  },
  // computed: {
  //   page() {
  //     const pages = []
  //     this.goodsList.forEach((item, index) => {
  //       const idx = Math.floor(index / 8)
  //       if (!pages[idx]) pages[idx] = []
  //       pages[idx].push(item)
  //     })
  //     return pages
  //   }
  // },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getClassifyList()
    this.getList(1)
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    payOrderSuccess() {
      this.$router.push({ name: 'OrderManager' })
    },
    // 场馆端商品分类列表
    getClassifyList() {
      goodsClassifyListVenue({
        param: {
          venueId: sessionStorage.getItem('venueId'),
          saleType: 0
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.typeList = [{ name: this.$t('message.qb'), id: '-1' }, ...res.recordList]
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 场馆端商品列表
    getList(page) {
      const { pagination } = this
      if (page) pagination.page = page
      goodsListVenue({
        pagination,
        param: {
          classifyId: this.selectType.id === '-1' ? '' : this.selectType.id,
          name: this.filters.goodsName,
          status: '1',
          type: 1,
          venueId: sessionStorage.getItem('venueId'),
          saleType: 0
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.goodsList = res.recordList
          this.totalCount = res.totalCount
          this.goodsList.forEach((item) => {
            item['buynum'] = 1
          })
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    toShow(scope) {
      // 展示折扣详情
      // list
      goodsDiscount({ param: { id: scope.row.id }}).then((res) => {
        if (res.errorCode !== '000000') return
        const discountInfo = res.recordList
        var memprice = ''
        discountInfo.forEach((item) => {
          memprice = memprice + item.cardName + ':' + item.memberPrice + ' \n '
        })
        // for (const price of discountInfo) {
        //   // eslint-disable-next-line no-const-assign
        //   memprice =
        //     memprice + price.cardName + ':' + price.memberPrice + ' \n '
        // }
        this.discountInfo = memprice
      })
    },
    handleClick(tab, event) {
      this.activeType = tab.name
      this.selectType = this.typeList.find((item) => this.activeType === item.id)
      this.getList()
    },
    addSaleGoods(item) {
      var count = 0
      item = JSON.stringify(item)
      item = JSON.parse(item)
      this.saleGoodsList.forEach((goods) => {
        if (goods.id === item.id) {
          count++
        }
      })
      // for (const goods of this.saleGoodsList) {
      //   if (goods.id === item.id) {
      //     count++
      //   }
      // }
      if (count === 0) {
        if (!item.stock || item.stock === '0') {
          return this.$message.info(this.$t('message.zsspkc'))
        }
        this.saleGoodsList.push(item)
      } else {
        this.$message.info(this.$t('message.cspytj'))
      }
    },
    delSaleGoods(index, item) {
      this.saleGoodsList = this.saleGoodsList.filter((goods) => {
        return item.id !== goods.id
      })
    },
    totalPrice() {
      var totalPrice = 0
      this.saleGoodsList.forEach((goods) => {
        totalPrice += goods.buynum * goods.price
      })
      // for (const goods of this.saleGoodsList) {
      //   totalPrice += goods.buynum * goods.price
      // }
      return totalPrice.toFixed(2)
    },
    settleAccount() {
      // this.dialogTableVisible = true
      const goodsList = []
      this.saleGoodsList.forEach((goods) => {
        goodsList.push({
          id: goods.id,
          goodsNum: goods.buynum
        })
      })
      // for (const goods of this.saleGoodsList) {
      //   goodsList.push({
      //     id: goods.id,
      //     goodsNum: goods.buynum
      //   })
      // }
      this.$refs.child.continuePay(goodsList, 'goodsSale')
    },
    clear() {
      this.filters.goodsName = ''
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.good-content{
  display: flex;
  flex-wrap: wrap;
}
.slode-style {
  width: 300px;
  width: calc(33% - 18px);
  height: 100px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.card-style {
  position: relative;
  display: flex;
  vertical-align: middle;
  // width: 300px;
  width: 100%;
  height: 100px;
  margin-right: 10px;
  img {
    width: 80px;
    height: 80px;
    margin-top: 10px;
    margin-left: 10px;
    padding: 0;
    border-radius: 4px;
  }
  .right-items {
    display: flex;
    flex-flow: column;
    flex: 1;
    .goods-name {
      color: #222;
      font-size: 14px;
      padding: 10px 10px;
      line-height: 14px;
    }

    .stock-style {
      font-size: 14px;
      .stock-title-style {
        color: #999;
        padding-left: 10px;
      }
    }
    .add-module-style {
      display: flex;

      .card-first-price {
        flex: 1;
        position: relative;
        color: #dd0707;
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: blod;
        line-height: 17px;
        vertical-align: center;
      }
      .add-item-style {
        margin-right: 10px;
        position: relative;
      }
    }
  }
}
.bottom-style {
  height: 50px;
  border-left: 1px #dfe2e8 solid;
  border-right: 1px #dfe2e8 solid;
  border-bottom: 1px #dfe2e8 solid;
  .sum-style {
    margin-left: 10px;
    margin-top: 17px;
    height: 15px;
    float: left;
    .sum-title {
      color: #222;
      font-size: 13px;
    }
    .sum-value {
      color: #dd0707;
      font-size: 17px;
      font-weight: 700;
    }
  }
  .btn-style {
    float: right;
    width: 80px;
    height: 30px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: #1943a9;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    line-height: 30px;
    font-size: 13px;
    font-weight: 700;
  }
}
.count-style {
  margin-left: 5px;
  margin-right: 5px;
}
.pay-style {
  width: 110px;
  height: 30px;
  font-size: 15px;
  line-height: 1px;
  vertical-align: middle
}
.slelect-pay-style {
  background-color: #1943A9;
  color: #fff;
}
.normal-pay-style {
  border: 1px solid #d8d8d8;
  background-color: #fff;
  color: #222;
}
.messgae-style {
  color: #DD0707;
}
.price-style {
  font-size: 17px;
  font-weight: 500;
}
.unit-style {
  margin-right: 20px;
}
.bottom-speace-style {
  margin-bottom: 10px;
}
.card-message {
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
    color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #DD0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #DD0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle
    }
  }
}

.settle-btn-style {
  margin-left: 20px;
}
.normal-style {
  border: solid 1px #d8d8d8;
}
.pre {
  white-space: pre;
  .discount-title {
    color: #303133;
    font-size: 16px;
    margin-bottom: 12px;
  }
}
</style>
